<script setup lang="ts">

import { defineEmits } from 'vue'
const emit = defineEmits(['change'])
const onclick = (value: string) => {
    emit('change', value)
}
</script>
<template>
    <div class="te-style-select d-inline-block">
        <el-button size="small" type="primary" @click="onclick('primary')"></el-button>
        <el-button size="small" type="success" @click="onclick('success')"></el-button>
        <el-button size="small" type="info" @click="onclick('info')"></el-button>
        <el-button size="small" type="warning" @click="onclick('warning')"></el-button>
        <el-button size="small" type="danger" @click="onclick('danger')"></el-button>
        <el-button size="small" type="text" @click="onclick('text')"></el-button>
        <el-button size="small" type="default" @click="onclick('default')"></el-button>
    </div>
</template>
<style scoped>
.te-style-select {
    overflow: hidden;
    min-width: 160px
}

.te-style-select .el-botton {
    margin-right: 10px;
}

:deep(.el-button--small) {
    padding: 2px 8px;
    --el-button-size: 20px;
}

:deep(.el-button+.el-button) {
    margin-left: 4px;
}
</style>